<template>
    <div class="goods-images">
        <h3>2、商品图片：</h3>
        <el-upload
                ref="file"
                :file-list="goodsImages"
                class="upload-demo"
                action="#"
                :auto-upload="false"
                :on-change="handleChange"
                name="goods"
                :on-remove="handleRemove"
                list-type="picture">
            <el-button size="small" type="primary" >点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div class="btn">
            <el-button type="primary" @click="previous">上一步</el-button>
            <el-button type="primary" @click="upGoodsImage" class="next">下一步</el-button>
        </div>
    </div>
</template>

<script>

    export default {
        name: "GoodsImages",
        props: {
            goodsImages: {
                type: Array,
            },
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                addFile:[],
                delGoodsFile:[],
            }
        },

        methods: {
            handleChange(file, fileList) {
                if (this.isEdit) {
                    this.addFile.push({img:file.raw,url:file.url})
                } else {
                    this.goodsImages.push({img:file.raw,url:file.url});
                }

            },
            handleRemove(file, fileList) {
                if (this.isEdit) {
                    this.delGoodsFile.push(file.url)
                } else {
                    let num;
                    this.goodsImages.filter((item, index)=> {
                        if (item.img.uid === file.uid) {
                            return num = index
                        }
                    })
                    this.goodsImages.splice(num, 1);
                }

            },
            upGoodsImage() {
                if (this.goodsImages.length === 0) {
                   alert('请添至少加商品一张商品图片')
                    return
                }else {
                    this.$emit('goodsImage')
                }
            },
            previous() {
                this.$emit('previous')
            },
            clearFiles() {
                this.$refs.file.clearFiles();
            }
        }
    }
</script>

<style scoped>
    .goods-images {
    }
    .btn {
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -89px;
    }
</style>